<template>
  <div>
    <el-form ref="searchForm" :inline="true" :model="searchMap" class="item">
      <el-form-item class="items1" prop="did">
        <el-input v-model="searchMap.did" placeholder="发货单编号"></el-input>
      </el-form-item>
      <el-form-item class="items2" prop="dvid">
        <el-input v-model="searchMap.dvid" placeholder="客户编号"></el-input>
      </el-form-item>
      <el-form-item class="items3" prop="dvphone">
        <el-input v-model="searchMap.dvphone" placeholder="联系方式"></el-input>
      </el-form-item>
      <el-form-item class="items4" prop="dename">
        <el-input v-model="searchMap.dename" placeholder="负责人"></el-input>
      </el-form-item>
      <el-form-item class="items5" prop="dgname">
        <el-input v-model="searchMap.dgname" placeholder="商品名"></el-input>
      </el-form-item>
      <el-form-item>
        <button type="primary" @click="fetchData" class="buttons1">查询</button>
        <button @click="resetForm('searchForm')" class="buttons2">重置</button>
        <button @click="dialogFormVisible = true" class="buttons3">新增</button>
      </el-form-item>
    </el-form>

    <el-table :data="list" style="width: 100%; font-size: 2px">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item>
              <span>发货单编号：</span>
              <span>{{ props.row.did }}</span>
            </el-form-item>
            <el-form-item>
              <span>负责人：</span>
              <span>{{ props.row.dename }}</span>
            </el-form-item>
            <el-form-item>
              <span>客户编号：</span>
              <span>{{ props.row.dvid }}</span>
            </el-form-item>
            <el-form-item>
              <span>客户姓名：</span>
              <span>{{ props.row.dvname }}</span>
            </el-form-item>
            <el-form-item>
              <span>地址：</span>
              <span>{{ props.row.dvaddress }}</span>
            </el-form-item>
            <el-form-item>
              <span>联系方式：</span>
              <span>{{ props.row.dvphone }}</span>
            </el-form-item>
            <el-form-item>
              <span>商品名：</span>
              <span>{{ props.row.dgname }}</span>
            </el-form-item>
            <el-form-item>
              <span>商品单价：</span>
              <span>{{ props.row.dgprice }}元/个</span>
            </el-form-item>
            <el-form-item>
              <span>发货量：</span>
              <span>{{ props.row.dcounts }}个</span>
            </el-form-item>
            <el-form-item>
              <span>总金额：</span>
              <span>{{ props.row.dmoney }}元</span>
            </el-form-item>
            <el-form-item>
              <span>付款方式：</span>
              <span>{{ props.row.dtype }}</span>
            </el-form-item>
            <el-form-item>
              <span>执行时间：</span>
              <span>{{ props.row.dtime }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="序号" type="index"> </el-table-column>
      <el-table-column label="发货单编号" prop="did"> </el-table-column>
      <el-table-column label="负责人" prop="dename"> </el-table-column>
      <el-table-column label="商品名称" prop="dgname"> </el-table-column>
      <el-table-column label="执行时间" prop="dtime" width="200"> </el-table-column>
    </el-table>

    <el-dialog title="新增发货单" width="460px" :visible.sync="dialogFormVisible">
      <el-form
        ref="pojo"
        :rules="rules"
        label-width="100px"
        label-position="right"
        style="width: 400px"
        :model="pojo"
      >
        <el-form-item label="客户姓名" prop="dvid" style="height: 36px">
          <el-select v-model="pojo.dvid" placeholder="请选择客户">
            <el-option
            v-for="option in vips"
            :key="option.vid"
            :label="option.vname"
            :value="option.vid"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="负责人" prop="deid" style="height: 36px">
          <el-select v-model="pojo.deid" placeholder="请选择负责人">
            <el-option
            v-for="option in staffs"
            :key="option.eid"
            :label="option.ename"
            :value="option.eid"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品名称" prop="dgid" style="height: 36px">
          <el-select v-model="pojo.dgid" placeholder="请选择商品">
            <el-option
            v-for="option in goods"
            :key="option.gid"
            :label="option.gname"
            :value="option.gid"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发货数量" prop="dcounts" style="height: 36px;">
          <el-input v-model="pojo.dcounts" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="付款方式" prop="dtype" style="height: 10px">
          <el-select v-model="pojo.dtype" placeholder="请选择付款方式">
            <el-option label="微信支付" value="微信支付"></el-option>
            <el-option label="支付宝支付" value="支付宝支付"></el-option>
            <el-option label="银行卡支付" value="银行卡支付"></el-option>
            <el-option label="现金支付" value="现金支付"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOneDispatch('pojo')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import dispatchApi from "@/api/dispatch";
import goodsApi from "@/api/goods";
import staffsApi from "@/api/staff";
import vipsApi from "@/api/member";
export default {
  data() {
    return {
      list: [],
      goods:[],
      vips:[],
      staffs:[],
      searchMap: {
        did: "",
        dvid: "",
        dvphone: "",
        dename: "",
        dgname: "",
      },
      dialogFormVisible: false,
      pojo: {
        dvid: '',
        deid: '',
        dgid: '',
        dcounts: '',
        dtype: ''
      },
      rules: {
        dvid: [{ required: true, message: "客户不能为空", trigger: "blur" }],
        deid: [{ required: true, message: "负责人不能为空", trigger: "blur" }],
        dgid: [{ required: true, message: "商品不能为空", trigger: "blur" }],
        dcounts: [{ required: true, message: "数量不能为空", trigger: "blur" }],
        stype: [{ required: true, message: "付款类型不能为空", trigger: "change" }]
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      staffsApi.getAllStaffsMessage().then((response) => {
        this.staffs = response.data;
      });
      vipsApi.getAllVipsMessage().then((response) => {
        this.vips = response.data;
      });
      goodsApi.getAllGoodsMessage().then((response) => {
        this.goods = response.data;
      });
      dispatchApi.search(this.searchMap).then((response) => {
        this.list = response.data;
      });
    },
    resetForm(fromName) {
      this.$refs[fromName].resetFields();
      this.fetchData();
    },
    addOneDispatch(fromName) {
      this.$refs[fromName].validate((valid) => {
        if (valid) {
          dispatchApi.addOneDispatch(this.pojo).then((response) => {
            console.log(response.data);
            if(response.data == 1){
              this.fetchData();
              this.dialogFormVisible = false
            }else{
              this.$message({
                type: "info",
                message: "新增失败！请及时检查库存！",
              });
            }
          });
        } else {

        }
      });
    },
  },
};
</script>
<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
span {
  font-family: "华文隶书";
}
.item {
  height: 46px;
}
.items1 {
  width: 139px;
}
.items2 {
  width: 139px;
}
.items3 {
  width: 110px;
}
.items4 {
  width: 70px;
}
.items5 {
  width: 70px;
}
.buttons1 {
  width: 50px;
  height: 30px;
  margin-right: 5px;
  background: #409eff;
  border-radius: 4px;
  border: white;
}
.buttons2 {
  width: 50px;
  height: 30px;
  margin-right: 5px;
  border-radius: 4px;
  background: #a5ada6;
  border: white;
}
.buttons3 {
  width: 50px;
  height: 30px;
  margin-right: 0px;
  background: #40ff60;
  border-radius: 4px;
  border: white;
}
</style>